import 'dart:async'; // 导入 Timer
import 'package:app_router_demo/gen/app_images.dart';
import 'package:app_router_demo/pages/login/widget/gradient_button.dart';
import 'package:app_router_demo/providers/auth_provider.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

@RoutePage()
class LoginCodePage extends StatefulWidget {
  final String? phoneNum;
  final String? countryCode;
  const LoginCodePage({
    super.key,
    @PathParam('phoneNum') required this.phoneNum,
    @PathParam('countryCode') required this.countryCode,
  });

  @override
  State<LoginCodePage> createState() => _LoginCodePageState();
}

class _LoginCodePageState extends State<LoginCodePage> {
  // 倒计时相关变量
  Timer? _timer;
  int _countdownSeconds = 60; // 初始倒计时秒数
  bool _isResendButtonEnabled = false; // 控制重发按钮是否可用

  // 不需要 _initialOtpFocusNode 了，因为不再自动请求焦点
  // final FocusNode _initialOtpFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 移除自动弹出键盘的逻辑
    // WidgetsBinding.instance.addPostFrameCallback((_) {
    //   FocusScope.of(context).requestFocus(_initialOtpFocusNode);
    // });

    // 启动倒计时
    _startCountdownTimer();
  }

  void _startCountdownTimer() {
    _countdownSeconds = 10; // 重置倒计时
    _isResendButtonEnabled = false; // 按钮设置为不可用
    _timer?.cancel(); // 取消之前的计时器（如果有）

    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_countdownSeconds == 1) {
        timer.cancel(); // 停止计时器
        setState(() {
          _isResendButtonEnabled = true; // 倒计时结束，按钮可用
        });
      } else {
        setState(() {
          _countdownSeconds--;
        });
      }
    });
  }

  // 模拟发送验证码，实际应调用API
  void _sendVerificationCode() async {
    print('发送验证码到手机号: ${widget.phoneNum}');

    // 在这里调用auth_provider.dart中的sendVerificationCode
    try {
      final authProvider = Provider.of<AuthProvider>(context, listen: false);

      // 从手机号中提取国家代码和手机号
      // 假设 widget.phoneNum 格式为 "+45 18888888888"
      String countryCode = widget.countryCode ?? '+45';
      String phoneNumber = widget.phoneNum ?? '';

      // 如果手机号包含国家代码，需要分离
      if (phoneNumber.startsWith('+')) {
        final parts = phoneNumber.split(' ');
        if (parts.length >= 2) {
          countryCode = parts[0];
          phoneNumber = parts.sublist(1).join('');
        }
      }

      print('发送验证码 - 国家代码: $countryCode, 手机号: $phoneNumber');

      final success = await authProvider.sendVerificationCode(
        phoneNumber,
        countryCode,
      );

      if (success) {
        print('验证码发送成功');
        // 模拟成功后，重新启动倒计时
        _startCountdownTimer();
      } else {
        print('验证码发送失败');
        // 可以在这里显示错误提示给用户
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('验证码发送失败，请稍后重试'),
            backgroundColor: Colors.red,
          ),
        );
      }
    } catch (e) {
      print('发送验证码时发生错误: $e');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('发送验证码时发生错误: $e'), backgroundColor: Colors.red),
      );
    }
  }

  @override
  void dispose() {
    // 释放资源
    _timer?.cancel(); // 取消计时器
    // _initialOtpFocusNode.dispose(); // 对应的 FocusNode 也无需在此处释放
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authProvider = Provider.of<AuthProvider>(context); // 确保监听
    // debugPrint('LoginCodePage build: isLoggedIn = ${authProvider.isLoggedIn}');

    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.black, // 根据图片，背景为黑色
      body: GestureDetector(
        // 包裹整个内容，以便点击背景隐藏键盘
        onTap: () {
          // 移除当前焦点，从而隐藏键盘
          FocusScope.of(context).unfocus();
        },
        child: Stack(
          children: [
            Positioned.fill(
              child: Image.asset(
                AppImages.VZ_DL_XKBG, // Replace with your actual image/video
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).padding.top + 10,
              left: 16,
              child: IconButton(
                onPressed: () => {context.router.pop()},
                icon: Icon(Icons.arrow_back_ios, size: 24, color: Colors.white),
              ),
            ),
            SafeArea(
              child: Column(
                children: [
                  SizedBox(
                    height: MediaQuery.of(context).padding.top + 44 + 52,
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 32, right: 32),
                    child: _buildLoginTopWidget(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLoginTopWidget() {
    return Column(
      children: [
        Text(
          "Enter confirmation code",
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.w700,
          ),
        ),
        SizedBox(height: 8),
        Text.rich(
          TextSpan(
            text: 'Code is sent to ',
            style: TextStyle(color: Colors.grey),
            children: [
              TextSpan(
                text: widget.phoneNum,
                style: TextStyle(
                  color: Colors.white, // 高亮颜色
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          textAlign: TextAlign.center,
        ),
        SizedBox(height: 26),

        // OTPFields 不再需要 initialFocusNode 参数
        const OTPFields(),

        SizedBox(height: 64),
        // 使用一个标准的 ElevatedButton 作为重发按钮
        GradientContinueButton(
          isActive: _isResendButtonEnabled,
          text:
              _isResendButtonEnabled
                  ? "Resend"
                  : "Resend(${_countdownSeconds}S)",
          onPressed: _isResendButtonEnabled ? _sendVerificationCode : null,
        ),
      ],
    );
  }
}

// ------------------- OTPFields -------------------
// 这里的修改主要是移除了 initialFocusNode 相关逻辑，因为它不再需要从外部接收焦点
class OTPFields extends StatefulWidget {
  // 移除 initialFocusNode 参数
  const OTPFields({super.key});

  @override
  State<OTPFields> createState() => _OTPFieldsState();
}

class _OTPFieldsState extends State<OTPFields> {
  final List<TextEditingController> controllers = List.generate(
    4,
    (_) => TextEditingController(),
  );
  final List<FocusNode> focusNodes = List.generate(4, (_) => FocusNode());

  @override
  void initState() {
    super.initState();
    // 移除这里对 initialFocusNode 的处理，因为它不再需要从外部接收焦点
  }

  @override
  void dispose() {
    // Dispose all internally created focus nodes
    for (final f in focusNodes) {
      f.dispose();
    }
    for (final c in controllers) {
      c.dispose();
    }
    super.dispose();
  }

  void _handleKeyEvent(RawKeyEvent event, int index) {
    if (event is RawKeyDownEvent &&
        event.logicalKey == LogicalKeyboardKey.backspace) {
      if (controllers[index].text.isEmpty && index > 0) {
        controllers[index - 1].clear();
        FocusScope.of(context).requestFocus(focusNodes[index - 1]);
      }
    }
  }

  // 新增：验证码验证方法
  Future<void> _verifyCode() async {
    String code = controllers.map((e) => e.text).join();
    print('输入的验证码是: $code');

    if (code.length == 4) {
      try {
        final authProvider = Provider.of<AuthProvider>(context, listen: false);

        // 获取父组件传递的手机号和国家代码
        final loginCodePageState =
            context.findAncestorStateOfType<_LoginCodePageState>();
        if (loginCodePageState != null) {
          String countryCode = loginCodePageState.widget.countryCode ?? '+45';
          String phoneNumber = loginCodePageState.widget.phoneNum ?? '';

          // 如果手机号包含国家代码，需要分离
          if (phoneNumber.startsWith('+')) {
            final parts = phoneNumber.split(' ');
            if (parts.length >= 2) {
              countryCode = parts[0];
              phoneNumber = parts.sublist(1).join('');
            }
          }

          print('验证登录 - 国家代码: $countryCode, 手机号: $phoneNumber, 验证码: $code');

          // 调用 appLogin 方法
          final success = await authProvider.appLogin(
            phoneNumber,
            code,
            countryCode,
            '1', // loginType
          );

          if (success) {
            print('登录验证成功');
            // 可以在这里处理登录成功的逻辑，比如跳转到主页
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('登录成功'),
                backgroundColor: Colors.green,
              ),
            );
            // TODO: 跳转到主页或其他页面
            // context.router.pushAndClearStack(const HomeRoute());
          } else {
            print('登录验证失败');
            // 清空输入框
            for (var controller in controllers) {
              controller.clear();
            }
            // 重新聚焦到第一个输入框
            FocusScope.of(context).requestFocus(focusNodes[0]);

            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('验证码错误，请重新输入'),
                backgroundColor: Colors.red,
              ),
            );
          }
        }
      } catch (e) {
        print('验证码验证时发生错误: $e');
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('验证时发生错误: $e'), backgroundColor: Colors.red),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: List.generate(4, (index) {
        return SizedBox(
          width: 60,
          height: 60,
          child: RawKeyboardListener(
            focusNode: FocusNode(), // 专用于监听键盘事件，仍然需要独立的FocusNode
            onKey: (event) => _handleKeyEvent(event, index),
            child: TextField(
              controller: controllers[index],
              focusNode: focusNodes[index], // 使用 OTPFields 内部的焦点节点
              onChanged: (value) {
                if (value.isNotEmpty) {
                  if (index < 3) {
                    FocusScope.of(context).requestFocus(focusNodes[index + 1]);
                  } else {
                    // 最后一个输入框输入完毕，收起键盘并执行验证
                    FocusScope.of(context).unfocus();
                    // 执行验证码验证逻辑
                    _verifyCode();
                  }
                } else {
                  // 如果删除了内容，且当前框为空，则回到上一个框
                  if (index > 0 && controllers[index].text.isEmpty) {
                    FocusScope.of(context).requestFocus(focusNodes[index - 1]);
                  }
                }
              },
              style: const TextStyle(color: Colors.white, fontSize: 24),
              textAlign: TextAlign.center,
              keyboardType: TextInputType.number,
              inputFormatters: [LengthLimitingTextInputFormatter(1)],
              decoration: InputDecoration(
                filled: true,
                fillColor: const Color(0xFF3A3A3A),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide.none,
                ),
              ),
            ),
          ),
        );
      }),
    );
  }
}
